<template>
  <div class="breadcrumb">
    <svg t="1648216170210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
         p-id="2293" width="80" height="80">
      <path
          d="M522.666667 522.666667c-76.8 0-140.8-64-140.8-140.8 0-76.8 64-140.8 140.8-140.8 76.8 0 140.8 64 140.8 140.8 0 76.8-64 140.8-140.8 140.8z m0-238.933334c-53.333333 0-98.133333 44.8-98.133334 98.133334 0 53.333333 44.8 98.133333 98.133334 98.133333 53.333333 0 98.133333-44.8 98.133333-98.133333 0-53.333333-44.8-98.133333-98.133333-98.133334z"
          fill="#00e6f7" p-id="2294"></path>
      <path
          d="M522.666667 832c-21.333333 0-40.533333-10.666667-53.333334-25.6l-151.466666-172.8c-21.333333-25.6-53.333333-70.4-70.4-100.266667-2.133333-2.133333-42.666667-72.533333-42.666667-151.466666C204.8 206.933333 347.733333 64 522.666667 64s317.866667 142.933333 317.866666 317.866667c0 76.8-40.533333 147.2-42.666666 151.466666-17.066667 29.866667-49.066667 72.533333-70.4 100.266667l-151.466667 170.666667c-12.8 17.066667-34.133333 27.733333-53.333333 27.733333z m0-725.333333c-151.466667 0-275.2 123.733333-275.2 275.2 0 66.133333 36.266667 128 36.266666 128 14.933333 27.733333 46.933333 70.4 66.133334 93.866666l151.466666 172.8c6.4 8.533333 12.8 10.666667 21.333334 10.666667s14.933333-4.266667 21.333333-10.666667l151.466667-172.8c19.2-23.466667 49.066667-66.133333 66.133333-93.866666 0 0 36.266667-64 36.266667-128C797.866667 230.4 674.133333 106.666667 522.666667 106.666667z"
          fill="#00e6f7" p-id="2295"></path>
      <path
          d="M522.666667 949.333333c-174.933333 0-360.533333-51.2-360.533334-142.933333 0-61.866667 85.333333-113.066667 226.133334-134.4 10.666667-2.133333 23.466667 6.4 23.466666 17.066667 2.133333 10.666667-6.4 23.466667-17.066666 23.466666-123.733333 19.2-189.866667 59.733333-189.866667 91.733334 0 42.666667 121.6 100.266667 317.866667 100.266666 198.4 0 317.866667-57.6 317.866666-100.266666 0-29.866667-64-72.533333-185.6-91.733334-10.666667-2.133333-19.2-12.8-17.066666-23.466666 2.133333-10.666667 12.8-19.2 23.466666-17.066667 138.666667 21.333333 221.866667 72.533333 221.866667 132.266667 0 96-185.6 145.066667-360.533333 145.066666z"
          fill="#00e6f7" p-id="2296"></path>
    </svg>
    <span class="text">{{ title }}</span>
  </div>
</template>

<script setup lang="ts">
const { content } = defineProps<{
  content: string | string[]
}>()

// 支持字符串模式和数组模式
const title = $computed(() => typeof content === 'object' ? content.join(' > ') : content)
</script>

<style lang="less" scoped>
.breadcrumb {
  margin-bottom: 60px;
  .text {
    font-size: 52px;
    vertical-align: 16px;
    margin-left: 10px;
  }
}
</style>
